<template>
  <el-card shadow="never">
    <div slot="header" class="card-header">
      <div v-for="item in headerList" :key="item.label">
        <h4>{{ item.label }}：</h4>
        <span>{{ item.value }}</span>
      </div>
    </div>
    <div class="card-body">
      <ViewForm :diff-map="dataVo.diffMap" />
    </div>
  </el-card>
</template>
<script>
import ViewForm from './ViewForm';
export default {
  components: { ViewForm },
  props: {
    cardDetails: {
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    dataVo () {
      const data = {
        recordNo: this.cardDetails?.recordNo ?? '',
        operName: this.cardDetails?.pusherName ?? '',
        opeTime: this.cardDetails?.pushTime ?? '',
        diffMap: this.cardDetails?.diffMap ?? {}
      }
      return data
    },
    headerList () {
      const list = [
        { label: '单据号', value: this.cardDetails?.recordNo ?? '' },
        { label: '修改人', value: this.cardDetails?.pusherName ?? '' },
        { label: '修改日期', value:  this.cardDetails?.pushTime ?? ''}
      ]
      return list
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-card__header {
  padding: 10px;
}
.card-header {
  display: flex;
  div {
    display: flex;
    align-items: center;
    &:not(:first-child) {
      margin-left: 20px;
    }
  }
}

</style>
